<template>
  <div>
    <el-dropdown
      trigger="click"
      :hide-on-click="false"
      ref="dropdown"
      style="width: 100%"
      @visible-change="handleDropdownVisible"
    >
      <span class="el-dropdown-link">
        <div>
          <el-row>
            <el-col :span="6" v-show="value.currencyName"
              ><span>币别：</span></el-col
            >
            <el-col
              :span="18"
              v-show="value.currencyName"
              class="select-value-item"
              ><span>{{ value.currencyName }}</span></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="6" v-show="value.exchangeRate"
              ><span>汇率：</span></el-col
            >
            <el-col
              :span="18"
              v-show="value.exchangeRate"
              class="select-value-item"
              ><span>{{ value.exchangeRate }}</span></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="6" v-show="value.amountFr"
              ><span>原币：</span></el-col
            >
            <el-col :span="18" v-show="value.amountFr" class="select-value-item"
              ><span>{{ value.amountFr }}</span></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="8" v-show="value.amount"
              ><span>本位币：</span></el-col
            >
            <el-col :span="16" v-show="value.amount" class="select-value-item"
              ><span>{{ value.amount }}</span></el-col
            >
          </el-row>
        </div>
        <i
          class="el-icon-arrow-down el-icon--right currency-value-icon"
          style="float: right"
        ></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <el-row>
            <el-col :span="8"><span>币别</span></el-col>
            <el-col :span="16" :class="optionClass">
              <currency-select
                v-model="value.currencyId"
                :class="optionClass"
                @change="handleCurrencyChange"
                @visible-change="handlePreventEvent"
              >
              </currency-select>
            </el-col>
          </el-row>
        </el-dropdown-item>
        <el-dropdown-item
          ><el-row>
            <el-col :span="8"><span>汇率</span></el-col>
            <el-col :span="16" :class="optionClass">
              <number-input
                v-model="value.exchangeRate"
                :class="optionClass"
                :precision="6"
                @input="handleExchangeRateChange"
                :disabled="!value.currencyId"
              >
              </number-input>
            </el-col> </el-row
        ></el-dropdown-item>
        <el-dropdown-item
          ><el-row>
            <el-col :span="8"><span>原币</span></el-col>
            <el-col :span="16" :class="optionClass">
              <number-input
                v-model="value.amountFr"
                :class="optionClass"
                :disabled="!value.currencyId || !value.exchangeRate"
                @input="handleAmountFrChange"
              >
              </number-input>
            </el-col> </el-row
        ></el-dropdown-item>
        <el-dropdown-item
          ><el-row>
            <el-col :span="8"><span>本位币</span></el-col>
            <el-col :span="16" :class="optionClass">
              <number-input
                v-model="value.amount"
                :class="optionClass"
                :disabled="!value.amountFr"
              >
              </number-input>
            </el-col> </el-row
        ></el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import currencySelect from "@/components/Select/currencySelect.vue";
import numberInput from "@/components/Input/numberInput.vue";
export default {
  components: {
    currencySelect,
    numberInput,
  },
  data() {
    return {
      value: {
        currencyId: "",
        currencyName: "",
        exchangeRate: null,
        amount: null,
        amountFr: null,
      },
    };
  },
  methods: {
    handleDropdownVisible(visible) {
      if (!visible) this.$emit("change", this.value);
    },
    handleCurrencyChange(currency) {
      this.value.currencyName = currency.name;
      this.value.exchangeRate = null;
      this.value.amount = null;
      this.value.amountFr = null;
    },
    handleExchangeRateChange() {
      if (this.value.amountFr)
        this.value.amount = (
          this.value.exchangeRate * this.value.amountFr
        ).toFixed(2);
    },
    handleAmountFrChange() {
      if (this.value.exchangeRate)
        this.value.amount = (
          this.value.exchangeRate * this.value.amountFr
        ).toFixed(2);
    },
    handlePreventEvent(visible) {
      if (!visible) this.$refs.dropdown.show();
    },
  },
  mounted() {
    if (this.item) {
      this.value.currencyId = this.item.currencyId;
      this.value.currencyName = this.item.currencyName;
      this.value.exchangeRate = this.item.exchangeRate;

      this.value.amountFr = this.item.amountFr;
      this.value.amount = this.item.debitAmount || this.item.creditAmount;
    }
  },
  watch: {
    value: {
      handler(value) {
        this.$emit("change", value);
      },
      deep: true,
    },
  },
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    optionClass: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped>
.currency-value-icon {
  float: right;
  position: relative;
  top: -10px;
}
.select-value-item {
  text-align: right;
}
</style>
